<template>
  <el-dialog
    title="预览渲染图"
    :visible.sync="dialogVisible"
    width="80%"
    top="0"
    @open="openHandle"
    :before-close="cancelBtn"
  >
    <div :style="{maxHeight:divHeight+'px',textAlign:'center',overflow:'auto'}">
      <!--<img :src="imgUrl"/>-->
      <img :src="imgUrl" :style="{width: '100%',maxWidth: '1008px'}"/>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    name: "previewPage",
    props: {
      dialogVisibleFu: Boolean,
      formDataFu: [Object]
    },
    data() {
      return {
        dialogVisible: false,
        formData:{},
        imgUrl: null,
        screenHeight: document.body.clientHeight, // 屏幕高度
        divHeight: document.body.clientHeight-215 // div高度
      };
    },
    watch: {
      screenHeight(val) {
        this.divHeight = val-215;
      },
      dialogVisibleFu(val) {
        this.dialogVisible = val;
      },
      formDataFu(val) {
        this.formData = val;
      },
    },
    mounted() {
      const that = this;
      window.addEventListener("resize", function () {
        return (() => {
          window.screenHeight = document.body.clientHeight;
          that.screenHeight = window.screenHeight;
          that.divHeight = that.screenHeight-215;
        })();
      });
    },
    methods: {
      openHandle() {
        // http://47.94.10.254:9600
        // http://ydgateway.thussat.cn
        // this.imgUrl = `http://ydgateway.thussat.cn/tools-render/rendering/preview/${this.formData.zkzNum}/${this.formData.quesId}`
        this.imgUrl = `${process.env.VUE_APP_BASE_API}/tools-render/rendering/preview/${this.formData.zkzNum}/${this.formData.quesId}`
      },
      // 取消,关闭弹框，修改父组件的值
      cancelBtn() {
        this.imgUrl = null;
        this.dialogVisible = false;
        this.$emit("closeDialog", this.dialogVisible);
      }
    },
  };
</script>

<style>
  .el-dialog:not(.is-fullscreen) {
    margin-top: 50px !important;
  }
  .el-dialog__header {
    border-bottom: 1px solid #666666;
  }
  .el-dialog__body{
    width: 100%;
  }
</style>

